<script setup lang="ts">
import {reactive, ref} from "vue";
import {addGiftInter, changeActivityInter, getGiftsInter, getLotteryListInter, hexiaoInter} from "@/api/interface/interFace";
import {addGiftFn, changeActivityInfo, getGiftsFn, getLotteryList, hexiaoLottery} from "@/api/system/SetActivity";
import {useRoute} from "vue-router";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {Delete, Edit, Plus, Refresh, Search} from "@element-plus/icons-vue";
import type {UploadProps} from 'element-plus';
import {getToken} from "@/utils/auth";
const hexiaoVisible = ref(false);
const centerDialogVisibleLottery = ref(false);
const imageUrl = ref('');
const imageUrlround = ref('');
const changeimageUrl = ref('');
const changeimageUrlround = ref('');
const deleteLotteryId = ref();
const hexiaoId = ref();
const hexiaoImg=ref();
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!);
    addformData.value.url = (uploadFile as any).response.fileName;
};
const handleAvatarSuccessround: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrlround.value = URL.createObjectURL(uploadFile.raw!);
    addformData.value.turntableUrl = (uploadFile as any).response.fileName;
};

const changehandleAvatarSuccessround: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    changeimageUrlround.value = URL.createObjectURL(uploadFile.raw!);
    changeformData.value.turntableUrl = (uploadFile as any).response.fileName;
};
const changehandleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    changeimageUrl.value = URL.createObjectURL(uploadFile.raw!);
    changeformData.value.url = (uploadFile as any).response.fileName;
};
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
        ElMessage.error('图片必须是jpg/jpeg/png格式');
        return false;
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!');
        return false;
    }
    return true;
};
const elRef = ref(null);
const addFormVisible = ref(false);
const changeFormVisible = ref(false);

function addsubmitForm() {
    (elRef as any).value.validate((valid) => {
        if (valid) {
            addGiftFn(addformData.value).then(() => {
                ElMessage.success('提交成功');
                giftInfo.value.length = 0;
                getGiftsFn(getGiftData.value).then(res => {
                    console.log(res);
                    giftInfo.value.push((res as any).rows);
                    gitfDatatotal.value = (res as any).total;
                });
                addFormVisible.value = false;
            });
        } else {
            ElMessage.error('提交失败');
            return false;
        }
    });
};
const addGiftImg = reactive({'Authorization': 'Bearer ' + getToken()});
const rules = ref({
    name: [{
        required: true,
        message: '请输入奖品名称',
        trigger: 'blur'
    }],
    probability: [{
        required: true,
        message: '请输入2位小数',
        trigger: 'blur'
    }],
    num: [{
        required: true,
        message: '请输入奖品数量',
        trigger: 'blur'
    }],
    type: [{
        required: true,
        message: '请选择奖品类型',
        trigger: 'blur'
    }],
    url: [{
        required: true,
        message: '请选择奖品图片',
        trigger: 'blur'
    }],
    turntableUrl: [{
        required: true,
        message: '请选择奖品图片',
        trigger: 'blur'
    }],
});
const giftTypeOptions = [{
    label: "默认类型",
    value: "default"
}, {
    label: "独立奖品",
    value: "single"
}, {
    label: "红包",
    value: "red_envelope"
}, {
    label: "盲盒",
    "value": "blind_box"
}];

const hexiaoStatus = [{
    label: "未核销",
    value: "0"
}, {
    label: "已核销",
    value: "1"
}];
const route = useRoute();
let gitfDatatotal = ref(0);
const centerDialogVisible = ref(false);
const deletesId = ref();
const routes = route.query.id;
const activeName = ref('first');
const form = ref({
    activeName: '',
    timeRange: [],
    deathTime: '',
    ruleText: '',
    num: 0,
});
const addformData = ref<addGiftInter>(
    {
        probability: 0,
        num: 0,
        type: '',
        url: '',
        turntableUrl: '',
        name: '',
        largeTurntableId: routes,
    }
);
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    getGiftData.value.pageNum = val;
    giftInfo.value.length = 0;
    getGiftsFn(getGiftData.value).then(res => {
        console.log(res);
        giftInfo.value?.push((res as any).rows);
    });
};

const handleCurrentLottery = (val: number) => {
    console.log(`current page: ${val}`);
    getLotteryListData.value.pageNum = val;
    lotteryInfo.value.length = 0;
    getLotteryList(getLotteryListData.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            if (item.status === '0') {
                item.statusText = '未核销';
            } else {
                item.statusText = '已核销';
            }
        });
        lotteryInfo.value?.push((res as any).rows);
    });
};
const changeActivityData = ref<changeActivityInter>({
    name: '',
    beginTime: '',
    endTime: '',
    increaseTimes: 0,
    deadLine: '',
    rule: '',
    largeTurntableId: routes,
});
const getGiftData = ref<getGiftsInter>({
    largeTurntableId: routes,
    pageSize: 10,
    pageNum: 1
});
let giftInfo = ref<object[]>([]);

function save() {
    changeActivityData.value.name = form.value.activeName;
    changeActivityData.value.beginTime = form.value.timeRange[0];
    changeActivityData.value.endTime = form.value.timeRange[1];
    changeActivityData.value.increaseTimes = form.value.num;
    changeActivityData.value.deadLine = form.value.deathTime;
    changeActivityData.value.rule = form.value.ruleText;
    changeActivityInfo(changeActivityData.value).then(() => {
        ElMessage.success('修改成功');
    });
}

getGiftsFn(getGiftData.value).then(res => {
    console.log(res);
    giftInfo.value.push((res as any).rows);
    gitfDatatotal.value = (res as any).total;
});

function getOnceActInfo(id) {
    return request({
        url: `/jsActivity/${id}`,
        method: 'get',
    });
};
getOnceActInfo(routes).then(res => {
    console.log(res);
    form.value.activeName = res.data.name;
    (form.value as any).timeRange[0] = res.data.beginTime;
    (form.value as any).timeRange[1] = res.data.endTime;
    form.value.deathTime = res.data.deadLine;
    form.value.ruleText = res.data.rule;
    form.value.num = res.data.increaseTimes;
});

//删除===========================================================
function deleteGift(id) {
    return request({
        url: `/jsActivityPrize/${id}`,
        method: 'delete',
    });
};

function deletes(id) {
    centerDialogVisible.value = true;
    deletesId.value = id;


}

function sureDelete() {
    deleteGift(deletesId.value).then(() => {
        ElMessage.success('删除成功');
        giftInfo.value.length = 0;
        getGiftsFn(getGiftData.value).then(res => {
            console.log(res);
            giftInfo.value.push((res as any).rows);
            gitfDatatotal.value = (res as any).total;
        });
        centerDialogVisible.value = false;
    });
}

function cencelDelete() {
    centerDialogVisible.value = false;
    centerDialogVisibleLottery.value = false;
    ElMessage('取消删除');
}

function cencelHexiao() {
    hexiaoVisible.value = false;
    ElMessage('取消核销');
}

function addGitfs() {
    addFormVisible.value = true;
}

function addCencel() {
    addFormVisible.value = false;
    ElMessage('取消新增');
}

function changeCenel() {
    changeFormVisible.value = false;
    ElMessage('取消修改');
}


//获取单个奖品信息
const changeformData = ref(
    {
        probability: 0,
        num: 0,
        type: '',
        url: '',
        turntableUrl: '',
        name: '',
        id: 0,
    }
);

function getOnceInfo(id) {
    return request({
        url: `/jsActivityPrize/${id}`,
        method: 'get',
    });
}

function sureChange(changeformData) {
    return request({
        url: `/jsActivityPrize`,
        method: 'put',
        data: changeformData
    });
}

function changeOnceGiftInfo(id) {
    changeFormVisible.value = true;
    getOnceInfo(id).then(res => {
        console.log(res);
        changeformData.value.num = res.data.num;
        changeformData.value.probability = res.data.probability;
        changeformData.value.type = res.data.type;
        changeformData.value.url = res.data.url;
        changeformData.value.turntableUrl = res.data.turntableUrl;
        changeformData.value.name = res.data.name;
        changeimageUrl.value = '/dev-api' + res.data.url;
        changeimageUrlround.value = '/dev-api' + res.data.turntableUrl;
        changeformData.value.id = res.data.id;
    });
}

function changesubmitForm() {
    (elRef as any).value.validate((valid) => {
        if (valid) {
            sureChange(changeformData.value).then(() => {
                ElMessage.success('修改成功');
                giftInfo.value.length = 0;
                getGiftsFn(getGiftData.value).then(res => {
                    console.log(res);
                    giftInfo.value.push((res as any).rows);
                    gitfDatatotal.value = (res as any).total;
                });
                changeFormVisible.value = false;
            });
        } else {
            ElMessage.error('提交失败');
            return false;
        }
    });
};
//查询抽奖记录部分
//获取所有信息
let LotteryInfototal = ref(0);
const getLotteryListData = ref<getLotteryListInter>({
    largeTurntableId: routes,
    pageSize: 10,
    pageNum: 1,
    userName: '',
    phoneNumber: '',
    rewardCode: '',
    status: ''
});
const lotteryInfo = ref<object[]>([]);
getLotteryList(getLotteryListData.value).then(res => {
    console.log(res);
    (res as any).rows.forEach(item => {
        if (item.status === '0') {
            item.statusText = '未核销';
        } else {
            item.statusText = '已核销';
        }
    });
    lotteryInfo.value?.push((res as any).rows);
    LotteryInfototal.value = (res as any).total;
});

function searchLotteryInfo() {
    lotteryInfo.value.length = 0;
    getLotteryList(getLotteryListData.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            if (item.status === '0') {
                item.statusText = '未核销';
            } else {
                item.statusText = '已核销';
            }
        });
        lotteryInfo.value?.push((res as any).rows);
        LotteryInfototal.value = (res as any).total;
    });
}

function resetLottery() {
    getLotteryListData.value.status = '';
    getLotteryListData.value.rewardCode = '';
    getLotteryListData.value.phoneNumber = '';
    getLotteryListData.value.pageNum = 1;
    getLotteryListData.value.pageSize = 10;
    getLotteryListData.value.userName = '';
    lotteryInfo.value.length = 0;
    getLotteryList(getLotteryListData.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            if (item.status === '0') {
                item.statusText = '未核销';
            } else {
                item.statusText = '已核销';
            }
        });
        lotteryInfo.value?.push((res as any).rows);
        LotteryInfototal.value = (res as any).total;
    });
}

//删除抽奖记录
function deleteLottery(id) {
    centerDialogVisibleLottery.value = true;
    deleteLotteryId.value = id;
}

function deleteLotteryFn(id) {
    return request({
        url: `/jsActivityRecord/${id}`,
        method: 'delete',
    });
}


function sureDeleteLottery() {
    deleteLotteryFn(deleteLotteryId.value).then(() => {
        ElMessage.success('删除成功');
        lotteryInfo.value.length = 0;
        getLotteryList(getLotteryListData.value).then(res => {
            console.log(res);
            (res as any).rows.forEach(item => {
                if (item.status === '0') {
                    item.statusText = '未核销';
                } else {
                    item.statusText = '已核销';
                }
            });
            lotteryInfo.value?.push((res as any).rows);
            LotteryInfototal.value = (res as any).total;
        });
        centerDialogVisibleLottery.value = false;
    });
}
//核销==================================================
function hexiao(id) {
    hexiaoId.value = id;
    hexiaoVisible.value = true;
}
const hexiaoSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    hexiaoImg.value = URL.createObjectURL(uploadFile.raw!);
    hexiaoData.value.url = (uploadFile as any).response.fileName;
};

const hexiaoData=ref<hexiaoInter>({
    url:'',
    id:0
});
function sureHexiao(){
    hexiaoData.value.id=hexiaoId.value;
    hexiaoLottery(hexiaoData.value).then(()=>{
        ElMessage.success('核销成功');
        lotteryInfo.value.length = 0;
        getLotteryList(getLotteryListData.value).then(res => {
            console.log(res);
            (res as any).rows.forEach(item => {
                if (item.status === '0') {
                    item.statusText = '未核销';
                } else {
                    item.statusText = '已核销';
                }
            });
            lotteryInfo.value?.push((res as any).rows);
            LotteryInfototal.value = (res as any).total;
        });
        hexiaoVisible.value = false;
    });
    hexiaoImg.value='';
    hexiaoData.value.url='';

}
</script>

<template>
    <div style="padding: 40px;">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基础设置" name="first" style="padding: 30px">
                <el-form :model="form" ref="formRef" style="margin-left: -200px">
                    <el-form-item label="活动名称：">
                        <el-input
                            v-model="form.activeName"
                            class="activeName"
                            placeholder="请输入活动名称"
                            clearable
                            size="large"></el-input>
                    </el-form-item>
                    <div style="width: 81%;margin-left: 55px">
                        <el-form-item label="活动时间：">
                            <el-date-picker
                                v-model="form.timeRange"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                clearable
                                size="large"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </div>
                    <el-form-item label="所需积分/次：">
                        <el-input-number
                            v-model="form.num" controls-position="right"
                            :min=0

                            size="large">
                            <template #decrement-icon>
                                <el-icon>
                                    <Minus/>
                                </el-icon>
                            </template>
                            <template #increase-icon>
                                <el-icon>
                                    <Plus/>
                                </el-icon>
                            </template>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="兑换截止时间：">
                        <el-date-picker
                            v-model="form.deathTime"
                            class="deadLine"
                            type="datetime"
                            placeholder="请选择时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            clearable
                            size="large"
                        />
                    </el-form-item>
                    <el-form-item label="活动规则：">
                        <editor
                            v-model="form.ruleText"
                            style="width: 100%;"
                        ></editor>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="save" class="saveBtn">保存</el-button>
            </el-tab-pane>
            <el-tab-pane label="奖项设置" name="second" style="padding: 20px">
                <el-button type="primary" :icon="Plus" style="margin-top: 20px;" @click="addGitfs">新增</el-button>
                <section class='tableBox'>
                    <el-table :data="(giftInfo[0] as any)" style="width: 100%;margin-top: 20px;" stripe border>
                        <template #empty>
                            <el-empty description="暂无数据"/>
                        </template>
                        <el-table-column prop="name" label="奖品名称" width="180" height/>
                        <el-table-column prop="url" label="奖品图片" width="180" height style="height: 80px">
                            <template #default="index">
                                <img :src="'/dev-api'+giftInfo[0][index.$index].url">
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="转盘图片" height>
                            <template #default="index">
                                <img :src="'/dev-api'+giftInfo[0][index.$index].turntableUrl">
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="类型" height/>
                        <el-table-column prop="probability" label="概率(%)" height/>
                        <el-table-column prop="num" label="派发数量" height/>
                        <el-table-column prop="lastNum" label="剩余数量" height/>
                        <el-table-column prop="操作" label="操作" height style="text-align: left">
                            <template #default="index">
                                <el-button style="color: #1c84c6;margin-left: 10px" :icon="Edit" @click="changeOnceGiftInfo(index.row.id)">编辑</el-button>
                                <br>
                                <el-button style="color: #1c84c6;margin-left: 10px" :icon="Delete" @click="deletes(index.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </section>
                <div style="position: relative">
                    <span style="margin-left: 1000px;position: absolute;top: 8px">共{{ gitfDatatotal }}条数据</span>
                    <el-pagination
                        style="margin-top: 20px;margin-left: 1150px"
                        :page-size="getGiftData.pageSize"
                        layout="prev, pager, next"
                        :total="gitfDatatotal"
                        @currentChange="handleCurrentChange"
                    />
                </div>
            </el-tab-pane>
            <el-tab-pane label="抽奖记录" name="third" style="padding: 10px 0 0 0">
                <div class="title" style="position: relative">
                    <span class="inputTitle">用户名称</span>
                    <el-input
                        v-model="getLotteryListData.userName"
                        class="userName"
                        placeholder="请输入用户名"
                        clearable
                    />
                    <span class="inputTitle">手机号</span>
                    <el-input
                        v-model="getLotteryListData.phoneNumber"
                        class="userName"
                        placeholder="请输入手机号"
                        clearable
                    />
                    <span class="inputTitle">兑换码</span>
                    <el-input
                        v-model="getLotteryListData.rewardCode"
                        class="userName"
                        placeholder="请输入兑换码"
                        clearable
                    />
                    <span class="inputTitle">核销状态</span>
                    <el-select
                        v-model="getLotteryListData.status"
                        placeholder="选择奖品类型"
                        size="default"
                        style="width: 240px"
                        class="userName"
                        clearable
                    >
                        <el-option
                            v-for="item in hexiaoStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <span class="btns">
            <el-button type="primary" :icon="Search" class="serachBtn" @click="searchLotteryInfo">查询</el-button>
            <el-button :icon="Refresh" class="refreshBtn" @click="resetLottery">重置</el-button>
        </span>
                </div>
                <el-table :data="(lotteryInfo[0] as any)" style="width: 100%;margin-top: 50px" stripe>
                    <template #empty>
                        <el-empty description="暂无数据"/>
                    </template>
                    <el-table-column prop="userName" label="用户名称" width="180" height/>
                    <el-table-column prop="phoneNumber" label="手机号" width="180" height/>
                    <el-table-column prop="winningItemName" label="奖品名称" height/>
                    <el-table-column prop="rewardCode" label="兑换码" height/>
                    <el-table-column prop="drawTime" label="抽奖时间" height/>
                    <el-table-column prop="statusText" label="核销状态" height/>
                    <el-table-column prop="操作" label="核销图片" height style="text-align: center">
                        <template #default="id">
                            <img :src="'/dev-api'+lotteryInfo[0][id.$index].url" style="width: 100px;height: 80px;display: inline-block">
                        </template>
                    </el-table-column>
                    <el-table-column prop="操作" label="操作" height style="text-align: left">
                        <template #default="index">
                            <el-button :class="(Number(index.row.status) as any)? 'hexiaoed':'weihexiao' " style="margin-left: 10px" :icon="Edit" @click="hexiao(index.row.id)" :disabled="(Number(index.row.status) as any)">核销</el-button>
                            <br>
                            <el-button style="color: #1c84c6;margin-left: 10px" :icon="Delete" @click="deleteLottery(index.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="position: relative">
                    <span style="margin-left: 1000px;position: absolute;top: 8px">共{{ LotteryInfototal }}条数据</span>
                    <el-pagination
                        style="margin-top: 20px;margin-left: 1150px"
                        :page-size="getLotteryListData.pageSize"
                        layout="prev, pager, next"
                        :total="LotteryInfototal"
                        @currentChange="handleCurrentLottery"
                        pager-count='5'
                    />
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog v-model="centerDialogVisible" title="提示" width="500" center>

            <el-icon color="rgb(255, 186, 0)" size="25">
                <Warning/>
            </el-icon>
            <span style="font-size: 20px;vertical-align: top;margin-left: 10px">进行删除操作后无法恢复，是否继续删除？</span>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cencelDelete">取消</el-button>
                    <el-button type="primary" @click="sureDelete">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="centerDialogVisibleLottery" title="提示" width="500" center>
            <el-icon color="rgb(255, 186, 0)" size="25">
                <Warning/>
            </el-icon>
            <span style="font-size: 20px;vertical-align: top;margin-left: 10px">进行删除操作后无法恢复，是否继续删除？</span>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cencelDelete">取消</el-button>
                    <el-button type="primary" @click="sureDeleteLottery">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="hexiaoVisible" width="500"  title="核销奖品">
            <el-upload
                class="avatar-uploader"
                action="/dev-api/common/upload"
                :show-file-list="false"
                :on-success="(hexiaoSuccess as any)"
                :before-upload="beforeAvatarUpload"
                :headers="addGiftImg"
            >
                <img v-if="hexiaoImg" :src="hexiaoImg" class="avatar" style="width: 150px;height: 150px;margin-left: 140px"/>
                <el-icon v-else class="avatar-uploader-icon" style="margin-left: 140px">
                    <Plus/>
                </el-icon>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cencelHexiao">取消</el-button>
                    <el-button type="primary" @click="sureHexiao">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <div>
            <el-dialog v-model="addFormVisible" title="新增奖品" width="600" style="padding: 20px">
                <el-form ref="elRef" :model="addformData" :rules="rules">
                    <el-form-item label="奖品名称：" prop="name">
                        <el-input
                            v-model="addformData.name"
                            placeholder="请输入奖品名称"
                            clearable
                            size="large"></el-input>
                    </el-form-item>
                    <el-form-item label="奖品概率：" prop="probability">
                        <el-input-number
                            v-model="addformData.probability"
                            :min="0"
                            :max="100"
                            :precision="2"
                            :step="0.01"
                            size="large"
                            controls-position="right"
                        />
                    </el-form-item>
                    <el-form-item label="奖品数量：" prop="num">
                        <el-input-number
                            v-model="addformData.num"
                            :min="0"
                            size="large"
                            :precision="0"
                            controls-position="right"
                        />
                    </el-form-item>
                    <el-form-item label="奖品类型：" prop="type">
                        <el-select
                            v-model="addformData.type"
                            placeholder="选择奖品类型"
                            size="large"
                            style="width: 240px"
                        >
                            <el-option
                                v-for="item in giftTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="奖品图片：" prop="url">
                        <el-upload
                            class="avatar-uploader"
                            action="/dev-api/common/upload"
                            :show-file-list="false"
                            :on-success="(handleAvatarSuccess as any)"
                            :before-upload="beforeAvatarUpload"
                            :headers="addGiftImg"
                        >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 150px;height: 150px"/>
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus/>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="转盘图片：" prop="turntableUrl">
                        <el-upload
                            class="avatar-uploader"
                            action="/dev-api/common/upload"
                            :show-file-list="false"
                            :on-success="(handleAvatarSuccessround as any)"
                            :before-upload="beforeAvatarUpload"
                            :headers="addGiftImg"
                        >
                            <img v-if="imageUrlround" :src="imageUrlround" class="avatar" style="width: 150px;height: 150px"/>
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus/>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer" style="margin-left: 360px">
                        <el-form-item>
                            <el-button size="large" @click="addCencel">取消</el-button>
                            <el-button type="primary" size="large" @click="addsubmitForm">确定</el-button>
                        </el-form-item>
                    </div>
                </template>
            </el-dialog>
            <el-dialog v-model="changeFormVisible" title="修改奖品" width="600" style="padding: 20px">
                <el-form ref="elRef" :model="changeformData" :rules="rules">
                    <el-form-item label="奖品名称：" prop="name">
                        <el-input
                            v-model="changeformData.name"
                            placeholder="请输入奖品名称"
                            clearable
                            size="large"></el-input>
                    </el-form-item>
                    <el-form-item label="奖品概率：" prop="probability">
                        <el-input-number
                            v-model="changeformData.probability"
                            :min="0"
                            :max="100"
                            :precision="2"
                            :step="0.01"
                            size="large"
                            controls-position="right"
                        />
                    </el-form-item>
                    <el-form-item label="奖品数量：" prop="num">
                        <el-input-number
                            v-model="changeformData.num"
                            :min="0"
                            size="large"
                            :precision="0"
                            controls-position="right"
                            style="width: 200px;"
                        />
                    </el-form-item>
                    <el-form-item label="奖品类型：" prop="type">
                        <el-select
                            v-model="changeformData.type"
                            placeholder="选择奖品类型"
                            size="large"
                            style="width: 240px"
                        >
                            <el-option
                                v-for="item in giftTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="奖品图片：" prop="url">
                        <el-upload
                            class="avatar-uploader"
                            action="/dev-api/common/upload"
                            :show-file-list="false"
                            :on-success="(changehandleAvatarSuccess as any)"
                            :before-upload="beforeAvatarUpload"
                            :headers="addGiftImg"
                        >
                            <img v-if="changeimageUrl" :src="changeimageUrl" class="avatar" style="width: 150px;height: 150px"/>
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus/>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="转盘图片：" prop="turntableUrl">
                        <el-upload
                            class="avatar-uploader"
                            action="/dev-api/common/upload"
                            :show-file-list="false"
                            :on-success="(changehandleAvatarSuccessround as any)"
                            :before-upload="beforeAvatarUpload"
                            :headers="addGiftImg"
                        >
                            <img v-if="changeimageUrlround" :src="changeimageUrlround" class="avatar" style="width: 150px;height: 150px"/>
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus/>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer" style="margin-left: 360px">
                        <el-form-item>
                            <el-button size="large" @click="changeCenel">取消</el-button>
                            <el-button type="primary" size="large" @click="changesubmitForm">确定</el-button>
                        </el-form-item>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<style scoped>
.saveBtn {
    width: 74px;
    height: 36px;
    border-radius: 18px;
    margin-left: 80px;
    margin-top: 20px;
}
.hexiaoed{
    color: #6d6d6d;
}
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.btns {
    margin-left: 80px;
    position: absolute;
    bottom: -10px;
}

/deep/ .el-form-item__label {
    font-weight: 700;
}

/deep/ .cell {
    text-align: center;
}

/deep/ .el-dialog__title {
    font-size: 26px;
}

/deep/ .el-form-item__label {
    width: 18% !important;
}

/deep/ .el-input__wrapper {
    width: 100% !important;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
.weihexiao{
    color: #1c84c6
}
.title {
    height: 65px;
    line-height: 65px;
    padding: 0 45px;
    overflow: hidden;
}

.inputTitle {
    font-size: 14px;
    font-weight: bolder;
    color: #666;

}

.userName {
    width: 12%;
    margin-left: 15px;
    margin-right: 15px;
    height: 28px;
    font-size: 16px;
    font-weight: 700;
}
</style>
